<template>
    <div class="container">
        <div class="waiceng" v-for="(item, index) in productList" :key="index">
            <div class="img">
                <img :src="item.image">
            </div>
            <div class="info">
                <div class="title">
                     {{ item.title }}
                </div>
               <div class="share">
                <van-icon name="friends-o" /> {{item.share}}正在参与砍价
               </div>
               <div class="minPrice">
                <span style="font-size: 14px;">可砍至</span>{{item.minPrice}}
                <span class="goBuy"><van-button @click="goBuy(item.id)" type="danger" size="small" round block> <van-icon name="shopping-cart-o"/>去砍价</van-button></span>
               </div>
            </div>
        </div>
    </div>
</template>






<script>
import { bargainList,bargainStart } from "@/api/bargain.js"
export default {
    data() {
        return {
            productList: []
        }
    },
    methods: {
        getProductList() {
            bargainList().then(res => {
                if (res.status === 200) {
                    this.productList = res.data
                } else {
                    this.$toast('加载失败 请刷新页面或稍后重试')
                }
            })
        },
        goBuy(data){
            const data1 = data.toString()
            const newData = {
                bargainId:data1,
                from:"string"
            }
            bargainStart(newData).then(res=>{
                if(res.status===200){
                    this.$toast('砍价成功')
                }else{
                    this.$toast('砍价失败')
                }
            })
        }
    },
    created() {
        this.getProductList()
    }

}
</script>

<style lang="scss" >
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    box-sizing: border-box;
}

.waiceng {
    width: 80%;
    height: 130px;
    margin: 0 auto;
    margin-top: 5%;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 1px #ccc;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 300px;
    clear: both;
    .img {
        width: 91px;
        img {
            margin-left: 10%;
            margin-top: 20%;
            width: 91px;
            height: 91px;
            float: left;
            border-radius: 5px;
        }
    }
    .info{
        float: left;
        height: auto;
        width: 60%;
        min-width: 60%;
        .title{
            
            margin-left: 10%;
            margin-top: 12%;
            font-size: 14px;

        }
        .share{
            margin-top: 10px;
            margin-left: 10%;
            width: auto;
            height: auto;

            color: #999999;
        }
        .minPrice{
            font-size: 16px;
            margin-top:7%;
            margin-left: 20px;
            width: auto;
            height: auto;
            color: #ff0000;
        }
    }
    .goBuy{
        float: right;
        margin-left: 30px;
        margin-top: -10px;
    }
}
</style>